<template>
  <div class="roleManage">
      <div class="ibox-title">
          <h5>角色管理</h5>
          <div class="ibox-tools">
              <a  class="dh"><i class="fa fa-chevron-up"  @click="toggle"></i></a>
              
              <!-- <a ><i class="fa fa-times"></i></a> -->
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">
                <a v-if="addBtnVisible" class="btn" @click="create"><i class="fa fa-plus"></i>创建</a>
                 
              </div>
              <!-- fa fa-refresh -->
              <div class="tt">
                    <el-table :data="tableData">
                    <el-table-column type="index" label="序号" width="70">
                      </el-table-column>
                      <el-table-column property="identify" label="标识" width="240" >

                      </el-table-column>
                      <el-table-column property="name" label="名称"  width="150" >
                        
                      </el-table-column>
                      <el-table-column property="unit" label="所属单位" width="150">
    
                      </el-table-column>
                      <el-table-column property="" align='center' label="操作" min-width="150">
                          <template scope="scope">
                            <span class="opt-btn-sp" style="float:right" > 
                              <a @click='modifyRoleDialog(scope)'><i class="fa fa-key"></i>角色授权</a>
                              <a v-if='cxoVisible' @click='changeDialogVisible("高管单位授权",scope.$index)'><i class="fa fa-database"></i>高管单位授权</a>
                              <a @click='changeDialogVisible("部门授权",scope.$index)'><i class="fa fa-database"></i>部门授权</a>
                              <a v-if="addBtnVisible" title="编辑" @click='modifyDialog(scope)'><i class="fa fa-edit"></i>编辑</a>
                              <a style="background-color:#ec4758;border-color:#ec4758" v-if="addBtnVisible" @click="del(scope)"><i class="fa fa-remove"></i>删除</a>
                            </span>   
                        <!--icon删除图标-->
                          </template>
                      </el-table-column>

                </el-table> 
              </div>
              
          </div>
   
       

        <div class="fenye">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.num"
           :page-size="page.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          >

          </el-pagination>
        </div>

      </div>


       <el-dialog :visible.sync="modifyShow" :title="title" >

            <el-form :model="form">
              <el-form-item label="标识*" :label-width="formLabelWidth">
                <el-input v-model="editData.identify" auto-complete="off" style="width:86%"></el-input>
              </el-form-item>
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="editData.name" auto-complete="off" style="width:86%"></el-input>
              </el-form-item>
              <el-form-item label="所属单位" :label-width="formLabelWidth" >
                <el-select value-key='setid' clearable v-model="editData.unit">
                  <el-option v-for='(k,i) in suoshuList' :key='i' :label="k.descrshort" :value='k' ></el-option>
                </el-select>

              </el-form-item>
           
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="modifyShow = false">取 消</el-button>
              <el-button type="primary" @click="confirmModify">保 存</el-button>
            </div>

      </el-dialog>

        <el-dialog
           top='5vh'
           :visible.sync="modifyRole"
           title="授权-系统管理员">
     
          <section class="roleManage-tree">
            <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
             highlight-current
            :props="defaultProps"
            :default-checked-keys="defaultChecked"
             default-expand-all	
             ref='roleTree'  
              >
            </el-tree>
          </section>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modifyRole = false">取 消</el-button>
            <el-button type="primary" @click="saveRoleModify">保 存</el-button>
          </div>
        </el-dialog>

        <department-dialog></department-dialog>
        <cxo-dialog></cxo-dialog>

      
  </div>
</template>

<script>
import Vue from 'vue'
import DepartmentDialog from '@/components/userManager/dialog/DepartmentDialog'
import CxoDialog from '@/components/userManager/dialog/CxoDialog'

import {
	ButtonGroup,
	Switch,
	Select,
	Input,
	Col,
	Row,
	Table,
	TableColumn,
	Tag,
	Pagination,
	Dialog,
	MessageBox,
	Message,
	Tree,
} from 'element-ui'

Vue.use(ButtonGroup)
Vue.use(Select)
Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tree)

export default {
	components: {
		DepartmentDialog,
		CxoDialog
	},

 
	data () {
		return {
			suoshuList:[],
			addBtnVisible:false,
			cxoVisible:false,
			editFormVisible: false,
			dialogTableVisible: false,
			input5: '',
			isShow: true,
			tableData: null,
			currentRow: null,
			modifyShow: false,
			title: '角色修改',
			modifyRole: false,
			defaultProps: {
				children: 'childList',
				label: 'name'
			},
			defaultChecked: [40, 41],
			treeData: null,
			RoleId: null,
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			formLabelWidth: '120px',
			editData: {},
			guanlian: true,
			dialogVisible: {
				department: false,
				cxo: false
			},
			page: {
				num: 1,
				size: 10,
				total: 0
			}

		}
	},
	mounted: function () {
		this.refresh()
		//绑定子页面需要的刷新模块方法
	},
	methods: {

  

		handleSizeChange (val) {
			this.page.size = val
			this.refresh()

		},
		handleCurrentChange (val) {
			this.page.num = val
			this.refresh()
		},


		changeDialogVisible (text, i) {
			const dialogVisible = this.dialogVisible
			switch (text) {
			case '部门授权':
				dialogVisible.department = true
				break

			case '高管单位授权':
				dialogVisible.cxo = true
				break
			default:
				break
			}

			Bus.$emit(text, dialogVisible)
			Bus.$emit('identify', this.tableData[i].identify)
			Bus.$emit('setid', this.tableData[i].setid)

  
		},
		toggle: function () {
			this.isShow = !this.isShow
		},
		modifyDialog: function (scope) {
			this.modifyShow = true
			this.editData = {}
			this.editData = JSON.parse(JSON.stringify(scope.row))
			this.getEditSelectList(scope.row.id)
		},
		getEditSelectList(id){

			this.editData.unit = {}
			this.suoshuList = []
			this.Axios.Post(this.URL.selectRoleById.url+ '?roleId=' + id).then((res)=>{
				this.editData.unit = res.data.datas.role
				this.suoshuList= res.data.datas.secondDept
			})

		},
		salaryDetail: function () {
			this.dialogTableVisible = true
		},
		refresh: function () {
			var self = this
			let params = {
				pageNum: this.page.num,
				pageSize: this.page.size
			}
			this.Axios.Post(this.URL.queryRole.url, params).then(function (res) {
				const data = res.data.datas
				const page = res.data.page
				self.tableData = data.roleList
				self.page.num = page.pageNum
				self.page.total = page.total
				self.cxoVisible = parseInt(data.showAddIcon)
				self.addBtnVisible  = parseInt(data.showExunitIcon)
			})
		},
		create: function () {
			// this.title = "创建角色";
			this.editData = {}
			this.modifyShow = true
			this.getCreateSelectList()
		},

		getCreateSelectList(){
			this.suoshuList = [] 
			this.Axios.Post(this.URL.addRole.url).then((res)=>{
				this.suoshuList= res.data.datas.secondDept
			})
		},

		confirmModify: function () {
			var self = this
			var params = {
				id: this.editData.id,
				setid:this.editData.unit.setid,
				descrshort:this.editData.unit.descrshort,
				name: this.editData.name,
				identify: this.editData.identify,
			}

			this.Axios.Post(this.URL.modifyRole.url, { role: params }).then(function (res) {
				if(res.data.status == 1){

					Message({
						message: res.data.message,
						type: 'success'
					})
					self.refresh()

					self.modifyShow = false

				}
			})


		},
		del: function (scope) {
			var self = this
			var roleId = scope.row.id
			var name = scope.row.name
			MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 ' + name, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type:'warning',
				callback: action => {
					if (action === 'cancel') {
						return
					}
					self.Axios.Post(self.URL.deleteRole.url + '?roleId=' + roleId).then(function () {
						self.refresh()
						Message({
							message: '删除成功',
							type: 'success'
						})
					})
				}
			})
		},
		modifyRoleDialog: function (scope) {
			var self = this
			this.title = '角色修改'
			self.RoleId = scope.row.id

			this.Axios.Post(this.URL.rolePermission.url + '?roleId=' + scope.row.id).then(function (res) {
				self.defaultChecked = res.data.datas.permissionIds
				self.treeData = res.data.datas.allPermission
				self.modifyRole = true
			})

		},
		saveRoleModify () {
			if (this.$refs.roleTree) {
				var checked = this.$refs.roleTree.getCheckedKeys()

				var params = {
					roleId: this.RoleId,
					permissions: checked
				}

				this.Axios.Post(this.URL.saveRolePermission.url, params).then((res) => {
					Message({
						message: '更新成功',
						type: 'success'
					})
					this.modifyRole = false
				})
			}

		}

	}
}
</script>

<style scoped lang='less'>
.roleManage .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.roleManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.content-right {
  float: right;
  margin-top: 17px;
}

.roleManage .select-dept {
  font-size: 14px;
}
.roleManage .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.roleManage .switch-btn {
  padding: 10px 10px;
}
.roleManage .collapse-card {
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.roleManage .third-card {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.roleManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.roleManage .third-card .collapse-card .box-title .box-header > .box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.roleManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
/*content*/
.roleManage {
  ::-webkit-scrollbar {
    width: 0px;
  }

  .roleManage-tree {
    height: 500px;
    overflow: auto;
    border: 1px solid #d1dbe5;
    padding-bottom: 20px;
    .el-tree {
      border: 0;
    }
  }
  .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
  }
  .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
  }

  .ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
  }
  .ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
  }
  /*ibox-centent*/
  .ibox-centent {
    padding: 20px 0;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
  }
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }
  .row .tt {
    padding: 0 30px;
  }

  .row .search {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .row .search .btn {
    width: 70px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
  }
  .row .search .btn:first-child {
    margin-left: 20px;
  }

  .row .search .btn:hover {
    background-color: #ccc;
    color: #000;
    cursor: pointer;
  }
  .row .search .wi {
    width: 33.3333333%;
  }

  .search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
  }
  .el-button .r {
    width: 66.66666667%;
  }
  .el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
  }
  /*table*/
  .el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
  }
  .btn-sp {
    padding-left: -10px;
  }
  .btn-sp > a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
  }
  .opt-btn-sp > a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
    cursor: pointer;
  }
  .delete > a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin: 10px 0;
    cursor: pointer;
  }
  .el-pagination {
    margin-top: 20px;
  }
  /*角色授权*/
  .modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
  }
  .modal-header .close {
    margin-top: -2px;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
  }
  .modal-title {
    margin: 0;
    line-height: 1.42857143;
  }
  .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
  }
  .modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
  }
  .el-dialog__body {
    color: #48576a;
  }
  .list-unstyled {
    padding-left: 0;
    list-style: none;
  }
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
  }
  .btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }
  .modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }

  .glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /*图标*/
  .glyphicon-off:before {
    content: '\e017';
  }
}

/*修改element-ui样式*/

.roleManage .el-radio-button__inner:hover {
  color: #333;
}
.roleManage .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.roleManage .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.roleManage .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.roleManage {
  .el-menu--collapse > .el-submenu > .el-submenu__title [class^='el-icon-'] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
  }
  .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
  }
  /*table*/

  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #18a689 !important;
  }
  .btn-default:hover {
    background-color: #e6e6e6 !important;
    cursor: pointer;
    border: 1px solid #d2d2d2 !important;
  }
}
</style>
